<template>
  <div class="app-container">
    <!-- 头部 -->
    <HeadBox @onClckBtn="selectProjectPupus"></HeadBox>
    <!-- 数据层 -->
    <DataStatistics></DataStatistics>
    <!-- 地图图层 -->
    <Loading :isLoading="isMapLoding"></Loading>
    <BaiDuMap :Height="100" :Width="100" ref="BDMapRef"></BaiDuMap>
    <!-- 图表图层 -->
    <div class="card-layer-l">
      <BaseInformation />
    </div>
    <div class="card-layer-r">
      <LanternsChart />
      <RankingChart />
      <!-- <BaseChart></BaseChart> -->
    </div>
    <div class="card-layer-b">
      <MonthElectricity />
      <YearElectricity />
    </div>
    <!-- 地图图例 -->
    <div class="map-tl-box">
      <div class="map-tu-li">
        <div style="display: flex;">
          <div class="tu-li-icon"></div>
          <div>{{ i18n.fy.当前项目 + ':' + titleText }}</div>
        </div>
        <div style="display: flex;">
          <div style="width: 2vh;height: 2vh;background-color:#00daea;margin-top: 5px;margin-right: 5px;"></div>
          <div>60＜{{ i18n.fy.esr }}＜80</div>
        </div>
        <div style="display: flex;">
          <div style="width: 2vh;height: 2vh;background-color:#00e36a;margin-top: 5px;margin-right: 5px;"></div>
          <div>80＜{{ i18n.fy.esr }}</div>
        </div>
      </div>
    </div>
    <!-- 项目选择弹出图层 -->
    <el-dialog v-model="isShowDialog" class="select-dialog" :show-close="false" width="380"
      style="background-color: #243046;">
      <template #header="{ close, titleId }">
        <div class="select-header">
          <input class="s-input" placeholder="请输入您要展示的项目名称" @change="inptSearchChang" v-model="searchName" />
          <el-icon class="s-input-i">
            <Search />
          </el-icon>
          <el-button type="success" style="margin-left: 5px;" @click="changeProjectObj()">
            <el-icon class="el-icon--left">
              <CircleCheckFilled />
            </el-icon>
            确认
          </el-button>
        </div>
      </template>
      <div style="height: 48vh;overflow: auto;">
        <el-radio-group v-model="selectPid" @change="changeRadioObj">
          <el-radio :value="item.id" size="large" v-for="(item, index) in selectList " :key="'xmsz' + index">
            <div>{{ item.projectName || '' }}</div>
          </el-radio>
        </el-radio-group>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import HeadBox from '@/views/bigscreen/components/HeadBox.vue'
import BaiDuMap from '@/views/bigscreen/components/BaiDuMap.vue'
import Loading from '@/views/bigscreen/iconbox/Loading.vue'
import DataStatistics from './components/DataStatistics.vue';
import LanternsChart from './components/LanternsChart.vue'
import BaseInformation from './components/BaseInformation.vue'
import RankingChart from './components/RankingChart.vue'
import YearElectricity from './components/YearElectricity.vue'
import MonthElectricity from './components/MonthElectricity.vue'
import { getProjectInfo } from '@/api/homepageApi'
import { useBigScreenStore } from "@/pinia/bigScreen"
const bsStore = useBigScreenStore();
import { i18nStore } from "@/pinia/i18n";
import { computed } from 'vue';
const i18n = i18nStore();

let isMapLoding = ref(true)
let isShowDialog = ref(false)
const BDMapRef = ref(null)

let selectPid = ref(bsStore.projectId)
let selectList = ref([])
let searchName = ref(bsStore.project.projectName)

// 计算属性
const titleText = computed(() => {
  if (bsStore.projectId) {
    return bsStore.projectId === 'all' ? bsStore.projectList.length + '个' : bsStore.project.projectName
  }
  return ''
})

// 监听项目id变化
watch(() => bsStore.projectId, (newVal, oldVal) => {
  console.log('首页组件同步项目ID->', newVal);
  selectPid.value = newVal
})

// 监听项目名称变化
watch(() => bsStore.project.projectName, (newVal, oldVal) => {
  searchName.value = newVal
})

const inptSearchChang = () => {
  let arr = []
  const item = [{ id: 'all', projectName: '全部项目' }]
  const newArr = item.concat(bsStore.projectList)
  newArr.forEach(element => {
    if (element.projectName.indexOf(searchName.value) != -1) {
      arr.push(element)
    }
  });
  selectList.value = arr
}

const getProjectList = async () => {
  console.log('获取项目列表');
  const data = await getProjectInfo();
  bsStore.setProjectList(data)
  const item = [{ id: 'all', projectName: '全部项目' }]
  selectList.value = item.concat(bsStore.projectList);
  bsStore.setProjectId(bsStore.projectList[0].id)
  bsStore.setProjectIds(data.map(item => item.id))
}

const changeRadioObj = (item) => {
  const selectedItem = selectList.value.find(item => item.id === selectPid.value);
  searchName.value = selectedItem.projectName
}

const selectProjectPupus = () => {
  isShowDialog.value = true
  searchName.value = bsStore.project.projectName
}

// 切换项目
const changeProjectObj = () => {
  bsStore.setProjectId(selectPid.value)
  isShowDialog.value = false
}

// 在组件挂载之前执行
onBeforeMount(() => {
  isMapLoding.value = true
  getProjectList()
})

onMounted(() => { setTimeout(() => { isMapLoding.value = false }, 10000); })

onUnmounted(() => { })
</script>

<style scoped>
:deep(.el-input__inner) {
  height: 16px;
}

:deep(.el-dialog__header) {
  height: auto;
  line-height: normal;
  background-color: #243046;
  padding: 0.8rem;
}

:deep(.el-dialog__body) {
  padding: 0px 0px 20px 20px;
}

:deep(.el-radio-group) {
  display: grid;
}

:deep(.el-radio) {
  color: #fff;
  margin: 10px 0px 0px 0px;
}
</style>

<style scoped lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  height: 100em;
  width: 100%;

  .card-layer-l {
    position: absolute;
    width: 30em;
    z-index: 999;
    margin-left: 1rem;
    margin-top: 5rem;
  }

  .card-layer-r {
    position: absolute;
    width: 100%;
    z-index: 999;
    right: calc(31em - 100%);
    margin-top: 5rem;
  }

  .card-layer-b {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 18rem;
    display: flex;
    justify-content: space-between;
    z-index: 999;
  }

  .select-header {
    display: flex;
    justify-content: space-between;
    background-color: #243046;

    .s-input {
      color: #fff;
      border: #0e84ff solid 1px;
      background: none;
      width: 100%;
      height: 30px;
      font-size: 14px;
      line-height: 20px;
      padding: 0px 10px;
    }

    .s-input-i {
      height: 2rem;
      right: 26.66%;
      font-size: 20px;
      color: #0e84ff;
      position: absolute;
    }
  }

  .map-tl-box {
    position: absolute;
    width: 100%;
    display: flex;
    bottom: 18.5rem;
    justify-content: center;
    z-index: 9;

    .map-tu-li {
      width: 35%;
      height: 3vh;
      border-radius: 6px;
      box-shadow: inset 0 0 40px #0fbff3;
      background-color: #002235;
      opacity: 0.8;
      display: flex;
      justify-content: space-around;
      font-size: 14px;
      color: #fff;
      line-height: 3vh;
    }

    .tu-li-icon {
      background: url(/src/assets/icon/xmdw_01.png) no-repeat center center;
      background-size: cover;
      width: 2vh;
      height: 2vh;
      /* padding: 1vh; */
      margin: 0.5vh;
    }

  }
}
</style>